<template>
  <div id="editors">
    	<div class="editors_top">
    		<i class="el-icon-arrow-left" @click="goBack"></i>
    		<p class="top_title">编辑笔记</p>
			<i class="el-icon-check" @click="keep"></i>
    	</div>
    	<div class="editors_bd">
    		<p class="editors_bd_top">
    			<span class="bd_title">标题：</span>
    			<input class="inp1" :value="title"></input>
    		</p>
    		<p class="editors_bd_text">
    			<quill-editor v-model="contents" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
    		</p>
    	</div>
  </div>
</template>

<script>
	import { quillEditor } from 'vue-quill-editor'
	import $ from 'jquery'
	export default {
	  name: 'editors',
	  data () {
	    return {
	    	id:'',
	    	title:'',
	    	contents:'',
	    	newcontent:'',
	    	editorOption: { // 定义富文本编辑器显示
//	      modules:{
//	      toolbar:[
//	       ['bold','italic','underline','strike'], // 加粗、倾斜、下划线、删除线
//	 
//	       [{'header':1},{'header':2}], // 标题一、标题二
//	       [{'list':'ordered'},{'list':'bullet'}], // 列表
//	 
//	       [{'color':[]},{'background':[]}], // 字体颜色、背景颜色
//	      ]
//	     }
	    }
	   } 
	  },
	  methods:{
	  	onEditorBlur(val,editor) { //失去焦点事件 
	  		console.log(val);
//	  		editor.enable(false);
			},
			onEditorFocus(val) { //获得焦点事件
				console.log(val);
			},
			onEditorChange({
				editor,
				html,
				text
			}) { //编辑器文本发生变化
				//this.content可以实时获取到当前编辑器内的文本内容
				this.newcontent = this.contents;
				
			},
	  	goBack() {
				history.back(-1)
			},
		keep() {
			  let id =	this.id;
		 		let val =	$(".inp1").val();
		 		let newcontent= this.newcontent;
		 		let desc = newcontent.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');
		 		let res = '';
					let code = '';
					let _this = this;
					if(this.$util.isEmpty(val)) {
						this.$message({message: '标题不能为空'});
					} else {
						this.$confirm('是否保存?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							let params = {
								id: this.id,
								name: val,
								content: newcontent,
								desc: desc
							}
							this.$post("/app/post/AppMyNoteController/editNoteContent", params).then((json)=>{
	           			if(json.returnCode == 0){
									this.$message({
																	type: 'success',
																	message: '保存成功!'
																})
	           			}else{
	           				this.$message({message: json.returnMessage});
	           			}
		          });
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消保存'
							});
						});
		 		
				}
	  }
	},
	 created(){
	  		this.id = this.$route.query.thisid
      	this.title = this.$route.query.thistitle
      	this.contents = this.$route.query.thiscontent
	  },
	  updated(){
//	  	debugger
	  	console.log(this.contents);
	  	console.log(this.title);
	  }
  }
</script>

<style>
	#app{
		width: 100%;
		height: 100%;
		font-size:0.14rem;
	}
	
	.editors_top{
		width: 100%;
		height: 0.45rem;
		display: flex;
		position: fixed;
		z-index: 999;
		background-color: lightblue;
	}
	
	.el-icon-arrow-left{
		font-size: 0.3rem;
		margin-top: 0.1rem;
		margin-left: 0.1rem;
	}
	
	.top_title {
		width: 2.8rem;
		font-size: 0.2rem;
		padding-top: 0.1rem;
		text-align: center;
	}
	
	.el-icon-check {
		font-size: 0.25rem;
		margin-top: 0.1rem;
		margin-left: 0.1rem;
	}
	
	.editors_bd{
		width: 100%;
		height: 100%;
		padding-top: 0.65rem;
		background-color: white;
	}
	
	.editors_bd_top{
		width: 100%;
		height: 0.5rem;
		display: flex;
		background-color: white;
	}
	
	.bd_title{
		width: 1rem;
		font-size: 0.2rem;
		text-align: center;
		padding-top: 0.1rem;
	}
	
	.inp1{
		width: 2rem;
		height: 0.3rem;
		margin-top: 0.05rem;
		font-size: 0.15rem;
		padding-top: 0.05rem;
		padding-left: 0.1rem;
		border: 1px solid gainsboro;
	}
	
	.editors_bd_text{
		background-color: white;
	}
	
	.el-message-box{
		width: 90%;
	}
</style>
